/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-09-11 21:53:13
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2024-09-12 09:49:40
 * @FilePath: \projecte:\学习\react\my-react-frameworke\src\components\Menu\menuItem.tsx
 * @Description: 
 */
import React, { useContext } from 'react'
import classNames from 'classnames'
import { MenuContext } from './menu'

export interface MenuItemProps {
    index?: number;
    disabled?: boolean;
    className?: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
}

const MenuItem: React.FC<MenuItemProps> = (props) => {
    const { index, disabled, className, style, children } = props
    const context = useContext(MenuContext)
    const classes = classNames('menu-item', className, {
        'is-disabled': disabled,
        'is-active': context.index === index
    })
    const handleClick = () => {
        if (context.onSelect && !disabled && (typeof index === 'number')) {
            context.onSelect(index)
        }
    }
    return (
        <li className={classes} style={style} onClick={handleClick}>
            {children}
        </li>
    )
}

export default MenuItem